<template>
  <div class="game-controls">
    <!-- 游戏速度控制 -->
    <div class="speed-controls">
      <button 
        v-for="speed in speedOptions" 
        :key="speed.value"
        class="speed-btn"
        :class="{ active: gameStore.gameSpeed === speed.value }"
        @click="setGameSpeed(speed.value)"
        :title="speed.label"
      >
        {{ speed.icon }}
      </button>
    </div>

    <!-- 暂停/继续按钮 -->
    <button 
      class="control-btn pause-btn"
      :class="{ active: gameStore.isPaused }"
      @click="togglePause"
      :title="gameStore.isPaused ? '继续游戏' : '暂停游戏'"
    >
      {{ gameStore.isPaused ? '▶️' : '⏸️' }}
    </button>

    <!-- 保存按钮 -->
    <button 
      class="control-btn save-btn"
      @click="quickSave"
      title="快速保存"
      :disabled="isSaving"
    >
      {{ isSaving ? '💾' : '💾' }}
    </button>

    <!-- 设置按钮 -->
    <button 
      class="control-btn settings-btn"
      @click="showSettings = true"
      title="游戏设置"
    >
      ⚙️
    </button>

    <!-- 菜单按钮 -->
    <button 
      class="control-btn menu-btn"
      @click="showMenu = true"
      title="游戏菜单"
    >
      ☰
    </button>

    <!-- 设置弹窗 -->
    <SettingsModal 
      v-if="showSettings" 
      @close="showSettings = false"
    />

    <!-- 游戏菜单弹窗 -->
    <GameMenu 
      v-if="showMenu" 
      @close="showMenu = false"
      @save="handleSave"
      @load="handleLoad"
      @new-game="handleNewGame"
      @exit="handleExit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useGameStore } from '@/stores'
import { GameEngine } from '@/services'
import SettingsModal from './SettingsModal.vue'
import GameMenu from './GameMenu.vue'

const gameStore = useGameStore()
const gameEngine = GameEngine.getInstance()

// 响应式状态
const showSettings = ref(false)
const showMenu = ref(false)
const isSaving = ref(false)

// 速度选项
const speedOptions = [
  { value: 0.5, icon: '0.5x', label: '慢速' },
  { value: 1, icon: '1x', label: '正常速度' },
  { value: 2, icon: '2x', label: '快速' },
  { value: 4, icon: '4x', label: '极速' }
]

// 方法
function setGameSpeed(speed: number) {
  gameEngine.setSpeed(speed)
}

function togglePause() {
  if (gameStore.isPaused) {
    gameEngine.resume()
  } else {
    gameEngine.pause()
  }
}

async function quickSave() {
  if (isSaving.value) return
  
  isSaving.value = true
  try {
    const success = await gameStore.saveGame('quicksave', '快速保存')
    if (success) {
      // 显示保存成功提示
      showNotification('游戏已保存', 'success')
    } else {
      showNotification('保存失败', 'error')
    }
  } catch (error) {
    console.error('保存游戏时出错:', error)
    showNotification('保存失败', 'error')
  } finally {
    isSaving.value = false
  }
}

function handleSave() {
  showMenu.value = false
  // 显示保存对话框
  // 这里可以实现更详细的保存界面
  quickSave()
}

function handleLoad() {
  showMenu.value = false
  // 显示加载对话框
  // 这里可以实现加载游戏界面
}

function handleNewGame() {
  showMenu.value = false
  // 确认对话框
  if (confirm('确定要开始新游戏吗？当前进度将会丢失。')) {
    gameStore.createNewGame()
  }
}

function handleExit() {
  showMenu.value = false
  // 确认对话框
  if (confirm('确定要退出游戏吗？')) {
    // 保存游戏并退出
    quickSave().then(() => {
      // 这里可以跳转到主菜单或关闭游戏
      window.close()
    })
  }
}

function showNotification(message: string, type: 'success' | 'error' | 'info' = 'info') {
  // 这里可以集成通知系统
  console.log(`${type}: ${message}`)
}
</script>

<style scoped>
.game-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.speed-controls {
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 2px;
}

.speed-btn {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  color: #cccccc;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 35px;
}

.speed-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.speed-btn.active {
  background: #00d4ff;
  color: #000000;
  font-weight: bold;
}

.control-btn {
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.5);
  transform: translateY(-1px);
}

.control-btn:active {
  transform: translateY(0);
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.pause-btn.active {
  background: rgba(255, 165, 0, 0.3);
  border-color: rgba(255, 165, 0, 0.6);
}

.save-btn:hover {
  background: rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.6);
}

.settings-btn:hover {
  background: rgba(168, 85, 247, 0.3);
  border-color: rgba(168, 85, 247, 0.6);
}

.menu-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.6);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .game-controls {
    gap: 0.25rem;
  }
  
  .speed-controls {
    display: none; /* 在小屏幕上隐藏速度控制 */
  }
  
  .control-btn {
    padding: 0.4rem;
    min-width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
}

/* 动画效果 */
@keyframes saveSuccess {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.save-btn.saving {
  animation: saveSuccess 0.3s ease;
}
</style>